<extend name="./Public/base" />
<block name="title">成绩</block>
<block name="head">
	<load href="__PUBLIC__/Css/course.css"/>
	<load href="__PUBLIC__/Css/grade.css"/>
	<load href="__PUBLIC__/Css/header.css"/>
</block>

<block name="header">
	<include file="Application/Home/View/Public/header_class.html" action="grade"/>
</block>
<block name="main">
	<div class="alert alert-danger hidden" role="alert"></div>
	<div class="alert alert-success hidden" role="alert"></div>
	<div class="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" id="grade-container">
		<div class="row">
			<div class="col-md-2 col-md-offset-1">
				<button class="btn btn-info" v-on:click="exportGrades">导出成绩表</button>
			</div>
			<div class="col-md-2 col-md-offset-6">
				<div class="input-group input-group search-group">
					<input type="text" class="form-control" placeholder="学号 、姓名" v-model="searchContent">
	                <span class="input-group-btn">
	                    <button class="btn btn-default" type="button" v-on:click="searchStu">
							<span class="glyphicon glyphicon-search"></span>
						</button>
	                </span>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-10 col-md-offset-1">
				<div class="panel panel-default grade-panel">
					<div class="panel-heading">
						<ul class="row">
							<li class="col-xs-2 panel-title grade-item">学号</li>
							<li class="col-xs-1 panel-title grade-item">姓名</li>
							<li class="col-xs-9 panel-titles">
								<a href="javascript:;" class="go-pre" v-on:click="goPre" v-show="front > 0"><span class="glyphicon glyphicon-chevron-left"></span></a>
								<ul class="row">
									<template v-for="quiz in quizs">
										<li class="col-xs-2" v-if="$index >= front && $index <= end">
											<div v-bind:title="quiz.qus_name" class="grade-item">{{ quiz.qus_name }}</div>
											<div class="text-muted grade-item quiz-time">{{ quiz.qus_create_time.substring(5, 10) }}</div>
										</li>
									</template>
								</ul>
								<a href="javascript:;" class="go-next" v-on:click="goNext" v-show="end < quizs.length-1"><span class="glyphicon glyphicon-chevron-right"></span></a>
							</li>

						</ul>
					</div>
					<div class="panel-body">
						<ul class="row score-row" v-for="student in students">
							<li class="col-xs-2 grade-item">{{ student.stu_number }}</li>
							<li class="col-xs-1 grade-item">{{ student.stu_name }}</li>
							<li class="col-xs-9 panel-quiz-score score-li">
								<ul class="row">
									<template v-for="score in student.allResult">
										<li class="col-xs-2"  v-if="$index >= front && $index <= end">
											<div class="grade-item text-danger" v-if="score.stu_score === '未交'">{{ score.stu_score }}</div>
											<div class="grade-item" v-else>
												<a v-bind:href="'__MODULE__/StuQuiz/quizResult/?qd='+quizs[$index].qus_id+'&sd='+student.stu_id" class="text-success" target="_blank">
													{{ score.stu_score }}
												</a>
											</div>
										</li>
									</template>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- count:课程个数 page:总页数 np:当前页数 -->
		<div class="row" v-if="pageInfo.page > 1">
			<div class="col-md-3 col-md-offset-5">
				<ul class="pagination">
					<li><a href="javascript:;" v-on:click="gotoPage(1)">&laquo;首页</a></li>
					<li v-if="pageInfo.np-1 > 0"><a href="javascript:;" v-on:click="gotoPage(pageInfo.np-1)">{{ pageInfo.np-1 }}</a></li>
					<li class="active"><a href="javasript:;">{{ pageInfo.np }}</a></li>
					<li v-if="pageInfo.np+1 <= pageInfo.page"><a href="javascript:;" v-on:click="gotoPage(pageInfo.np+1)">{{ pageInfo.np+1 }}</a></li>
					<li><a href="javascript:;" v-on:click="gotoPage(pageInfo.page)">末页&raquo;</a></li>
				</ul>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function initVm(quizs, students, pageInfo) {
			vm = new Vue({
				el: "#grade-container",
				data: {
					searchContent: "",
					quizs: quizs,
					students: students,
					pageInfo: pageInfo,
					front: 0,
					end: 5,
				},
				methods: {
					gotoPage: function(index) {
						var cla_id = location.search.substring(1).split("=")[1];
						var that = this;
						postApi("__MODULE__/QuizResult/getAllGrades", {cla_id: cla_id, np: index}, function(err, data) {
							if (err) {
								showError(err.message);
							} else {
								that.quizs = data.data.quizs;
								that.students = data.data.students;
								that.pageInfo = data.data.pageInfo;
								that.front = 0;
								that.end = 5;
							}
						})
					},
					searchStu: function() {
						if (!this.searchContent) {
							showError("请输入内容");
							return;
						}
						var that = this;
						var cla_id = location.search.substring(1).split("=")[1];
						postApi("__MODULE__/QuizResult/getSomeGrades", {class_cla_id: cla_id, keyword: this.searchContent}, function(err, data) {
							if (err) {
								showError(err.message);
							} else {
								that.students = data.data;
								that.pageInfo.page = 0;
								that.front = 0;
								that.end = 5;
							}
						})
					},
					exportGrades:function(){
						var cla_id = location.search.substring(1).split("=")[1];
						window.open("__MODULE__/ExportExcel/exportAllGrades?cad="+cla_id);
					},
					goPre: function() {
						if (this.front > 0) {
							this.front--;
							this.end--;
						}
						$(".row .col-xs-9").hide().fadeIn("slow");
					},
					goNext: function() {
						if (this.end < quizs.length-1) {
							this.front++;
							this.end++;
						}
						$(".row .col-xs-9").hide().fadeIn("slow");
					}
				},
			})
		}

		$(function() {
			//背景的设置
			var bg = $("#cla_id").val() % 5 + 1;
			$("#title img").prop("src","__PUBLIC__/Images/" + bg + ".jpg");
			//班级基本信息的显示
			$(".classInfo").css("opacity","1");
			var cla_id = location.search.substring(1).split("=")[1];
			$("#grade-container").hide();
			postApi("__MODULE__/QuizResult/getAllGrades", {cla_id: cla_id}, function(err, data) {
				if (err) {
					showError(err.message);
				} else {
					initVm(data.data.quizs, data.data.students, data.data.pageInfo);
					$("#grade-container").show();
				}
			})
		})
	</script>
</block>